<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>table</h1>
    <hr>

    <table width="800" border="1" cellspacing="0" cellpadding="5" id="tab">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>班期</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>艳艳</td>
            <td>17</td>
            <td>s75</td>
            <td>
                <button onclick="deleteData(this)">删除</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>管健</td>
            <td>80</td>
            <td>s75</td>
            <td>
                <button onclick="deleteData(this)">删除</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>小龙龙</td>
            <td>19</td>
            <td>s75</td>
            <td>
                <button onclick="deleteData(this)">删除</button>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>小静静</td>
            <td>17</td>
            <td>s77</td>
            <td>
                <button onclick="deleteData(this)">删除</button>
            </td>
        </tr>
    </table>
    
    <br><br>
    <hr>
    <form name="myform" onsubmit="return addData()">
        姓名: <input type="text" name="name"><br>
        年龄: <input type="text" name="age"><br>
        班期: <input type="text" name="grade"><br>
        <button>添加</button>
    </form>


    <script>
    function addData(){
        // 各种获取
        var table = document.getElementById('tab');
        var name = document.myform.name.value;
        var age = document.myform.age.value;
        var grade = document.myform.grade.value;

        // 获取当前table的 行数
        var index = table.rows.length;

        // 给table 添加一个新行
        var tr = table.insertRow(index);
        // console.log(tr);
        
        tr.insertCell(0).innerHTML = index;
        tr.insertCell(1).innerHTML = name;
        tr.insertCell(2).innerHTML = age;
        tr.insertCell(3).innerHTML = grade;
        tr.insertCell(4).innerHTML = '<button onclick="deleteData(this)">删除</button>';
        
        return false;
    }
    
    // 删除行
    function deleteData(obj) {
        console.log(obj);
        var table = document.getElementById('tab');
        table.deleteRow(obj.parentNode.parentNode.rowIndex);
    }
    </script>
</body>
</html>